<template>
	<div class="page">
		<div class="p-10 system-page-background b-radius-4">
			<my-form inline query :model="queryParams" :form-item="queryFormItem" :search-fn="() => refTable.reload()" />
		</div>
		<div class="flex-auto flex-col system-page-background m-t-10 b-radius-4">
			<div class="p-10">
				<el-button type="primary" icon="Plus" @click="(addDir(), insertFn())">新 增</el-button>
				<el-button type="danger" :disabled="!tableSelection.length" icon="Delete" @click="deleteFn(tableSelection)"> 删 除 </el-button>
			</div>
			<div class="flex-auto flex-col">
				<my-list-panel ref="refTable" :total="state.total" :load-fn="loadData">
					<template #default="scope">
						<my-table :data="state.list" :columns="state.columns" row-key="id" @selection-change="(val) => (tableSelection = val)">
							<template #index="{ $index }">{{ $index + 1 + (scope.page - 1) * scope.size }}</template>
							<template #expand="{ row }">
								<div class="m-l-50">
									<!-- <h4 class="m-b-10">历史文档</h4> -->
									<my-table :data="row.children" :columns="chidrenColumns">
										<template #default="{ row: childrenRow }">
											<my-button-text @click="downLoadFile(childrenRow)">下载文件</my-button-text>
											<my-button-text @click="previewFile(childrenRow)">预览文件</my-button-text>
										</template>
										<template #fileName="{ row: childrenRow }">
											{{ childrenRow.fileName + childrenRow.fileSuffix }}
										</template>
									</my-table>
								</div>
							</template>
							<template #default="{ row }">
								<my-button-text @click="(addFile(row), insertFn())">上传文件</my-button-text>
								<my-button-text @click="(addDir(), updateFn(row))">修改</my-button-text>
								<my-button-text @click="deleteFn(row)">删除</my-button-text>
							</template>
						</my-table>
					</template>
				</my-list-panel>
			</div>
		</div>
		<!-- 添加、修改对话框 -->
		<el-dialog v-model="dialog.open" :title="dialogTitle" width="570px" append-to-body @closed="resetForm(refDialogFrom)">
			<my-form ref="refDialogFrom" :model="dialog.form" label-width="110px" :disabled="['detail'].includes(dialog.name)" :form-item="formItem" />
			<template #footer>
				<el-button @click="dialog.open = false">取 消</el-button>
				<el-button type="primary" @click="submitFn">确 定</el-button>
			</template>
		</el-dialog>

		<!-- <PreView v-bind="previewData" @close="previewData.data = {}"></PreView> -->
		<MyPreview v-bind="previewData" @close="previewData.data = {}"></MyPreview>
	</div>
</template>

<script setup>
import {
	pageFileMangt as page,
	editFileMangt as edit,
	removeFileMangt as remove,
	fileAddRoot,
	fileAddFile,
	pageKnowledgeType as useList
} from '@/api/system';
import { FILE_PREFIX } from '@/config';

const list = ref([]);
useList().then((res) => {
	list.value = res.data.rows;
});
let queryParams = ref({}),
	queryFormItem = computed(() => [
		{
			prop: 'likeFileName',
			label: '文件名称'
		},
		{
			itemType: 'cascader',
			list: list.value,
			props: { value: 'id', label: 'knowledgeName', expandTrigger: 'hover', emitPath: false, checkStrictly: true },
			prop: 'fileType',
			label: '文件类型'
		}
	]),
	state = ref({
		total: 0,
		list: [],
		columns: [
			{
				type: 'selection'
			},
			{
				type: 'expand',
				width: 30
			},
			{
				label: '序号',
				prop: 'index',
				width: 60
			},
			{
				label: '文件名称',
				prop: 'fileName'
			},
			{
				label: '文件类型',
				prop: 'fileTypeName'
			},
			{
				label: '操作',
				width: 180,
				showOverflowTooltip: false,
				align: 'center'
			}
		]
	}),
	// 弹出层
	dialog = ref({
		title: '目录',
		open: false,
		name: '',
		form: {
			id: undefined
		}
	});
const chidrenColumns = [
	{
		label: '文件名称',
		prop: 'fileName'
	},
	{
		label: '文件大小',
		prop: 'fileSizeFormat'
	},
	{
		label: '文件版本',
		prop: 'version'
	},
	{
		label: '操作',
		width: '180',
		showOverflowTooltip: false,
		align: 'center'
	}
];
const dirFormItem = () => [
	{
		label: '文件名称',
		prop: 'fileName',
		required: true
	},
	{
		itemType: 'cascader',
		list: list.value,
		props: { value: 'id', label: 'knowledgeName', expandTrigger: 'hover', emitPath: false, checkStrictly: true },
		prop: 'fileType',
		label: '类型',
		required: true
	}
];

const fileFormItem = [
	{
		label: '文件',
		prop: 'knowledgeFileList',
		itemType: 'file',
		fileSize: 1024,
		fileType: ['xlsx', 'xls', 'pdf', 'mp4', 'm2v', 'mkv', 'docx', 'doc', 'txt', 'ppt', 'pptx', 'png', 'jpg', 'jpeg', 'bmp', 'gif'],
		required: true,
		astrict: true
	}
];

const formItem = ref([]);
function addDir() {
	formItem.value = dirFormItem();
	dialog.value.title = '目录';
}

let parentId = '';
function addFile(row) {
	dialog.value.title = '文件';
	dialog.value.open = true;
	formItem.value = fileFormItem;
	parentId = row.id;
}

// 表格数据
const refTable = ref(null),
	refDialogFrom = ref(null),
	tableSelection = ref([]);
const { dialogTitle, loadData, getList, insertFn, deleteFn, updateFn } = pageMixin({
	queryParams,
	queryFormItem,
	state,
	api: { page, edit, remove },
	dialog,
	refTable,
	refDialogFrom
});

function submitFn() {
	refDialogFrom.value.$refs.refMyForm.validate(async (valid) => {
		if (valid) {
			try {
				if (dialog.value.title == '目录') {
					await (dialog.value.name == 'insert' ? fileAddRoot : edit)(dialog.value.form);
				} else if (dialog.value.title == '文件') {
					let params = Object.assign({}, dialog.value.form.knowledgeFileList[0], {
						parentId,
						fileId: dialog.value.form.knowledgeFileList[0].id
					});
					await fileAddFile(params);
					parentId = '';
				}
				msgSuccess(`${dialog.value.name === 'insert' ? '新增成功！' : '修改成功！'}`);
				dialog.value.form = {};
				formItem.value = [];
				dialog.value.open = false;
				getList();
			} catch {
				formItem.value = [];
			}
		}
	});
}

function downLoadFile(data) {
	downloadGet({
		url: FILE_PREFIX ? `${FILE_PREFIX}` + data.storageUrl : data.downloadUrl,
		fileName: data.fileName + data.fileSuffix
	});
}

let previewData = ref({
	show: false,
	data: {}
});
function previewFile(row) {
	previewData.value.show = true;

	row.downloadUrl = FILE_PREFIX ? `${FILE_PREFIX}` + row.storageUrl : row.downloadUrl;

	previewData.value.data = { ...row, type: row.fileSuffix.substr(1) };
}
</script>

<style lang="scss" scoped>
:deep(.el-table__expand-icon > .el-icon) {
	font-size: 20px !important;
}

:deep(.is-fullscreen .el-dialog__body) {
	height: 100% !important;
}

:deep() {
	.el-table__placeholder {
		display: none;
	}
}
</style>
